<template>
  <div class="place_Manage">
    <!-- <x-header title="位置管理" :leftOptions="showBack"></x-header> -->
    <loading :show="isLoading"></loading>

    <confirm :value="show" v-if="show" :title="title"  @on-confirm="handleOk" @on-cancel="handleCancel" @on-show="onShow">
      <input placeholder="请输入" type="text" ref="input" class="inp_text" @touchend="setInputFocus" v-model="inputValue">
    </confirm>

    <confirm :value="delShow" v-if="delShow" title="提示"    @on-confirm="delHandleOk" @on-cancel="delHandleCancel">
      <div>是否确认删除</div>
    </confirm>
    
    <group v-if="ResList.length>0">
      <popup-picker
          v-for="item in ResList" 
          :key="item.id"
          :title="item.place"
          :data="operateList"
          :columns="1"
          @on-change="change(item.id,item.place,$event)"
          show-name
        >
      </popup-picker>
    </group>
    <template v-else>
      <no-data></no-data>
    </template>
    <div class="submit-box">
      <x-button class="submit-btn" @click.native="addBtn()">新增</x-button>
    </div>
  </div>
  
</template>

<script>
import { XButton, Group, PopupPicker, Confirm, Loading, XHeader     } from "vux";
import ManageApi from "@/api/manage.js";
export default {
  name:'placeManage', // 位置管理
  components: {  XButton, Group, PopupPicker, Confirm, Loading, XHeader, },
  data() {
    return {
      ID:'', // 当前选中的ID
      operateList:["编辑","删除"],
      ResList:[],
      show: false, // 输入弹窗标志位
      inputValue: '', // 输入框内容
      title:'',
      isLoading:false, 
      delShow:false, // 删除标志位
      showBack:{
        showBack:false,
        preventGoBack:false
      }
    };
  },
  mounted() {
    this.getList(1,10000);
  },
  methods:{
    onShow(){
      setTimeout(() => {
        if (this.$refs.input) {
          this.setInputFocus()
        }
      }, 300)
    },
    // 获取焦点
    setInputFocus (evt) {
      if (evt) {
        evt.preventDefault()
      }
      this.$refs.input.focus()
    },
    // 确认删除按钮
    delHandleOk(){
      let data = {}
      data.ids = this.ID
      this.Remove(data)
    },
    // 取消删除按钮
    delHandleCancel(){
      this.delShow = false
      this.ID = ''
    },

    // 确认输入框弹按钮
    handleOk() {
      let data = {}
      data.id = this.ID
      data.isDel = 0
      data.place = this.inputValue
      if(this.ID){
        this.Update(data)
      }else{
        this.Add(data)
      }
     
    },
    // 取消输入框弹按钮
    handleCancel() {
      this.hideConfirm();
    },
    // 关闭输入框弹窗清除输入框内容
    hideConfirm() {
      this.show = false;
      this.inputValue = '';
      this.ID = ""
    },

    // 更新状态
    Update(data){
      this.isLoading = true
      ManageApi.assetPlaceUpdate(data).then((res) => {
        this.isLoading = false
        if (res.code == "0000") {
          this.$vux.toast.show({
            text: "修改成功",
            type: "success",
          });
          this.hideConfirm();
          this.getList();
        }else{
          this.$vux.toast.show({
            text: res.message,
            type: "warn",
          });
        }
      });
    },
    
    // 新增
    Add(data){
      this.isLoading = true
      ManageApi.assetPlaceAdd(data).then((res) => {
        this.isLoading = false
        if (res.code == "0000") {
          this.$vux.toast.show({
            text: "新增成功",
            type: "success",
          });
          this.hideConfirm();
          this.getList();
        }else{
          this.$vux.toast.show({
            text: res.message,
            type: "warn",
          });
        }
      });
    },
    // 删除
    Remove(data){
      this.isLoading = true
      ManageApi.PlaceRemove(data).then((res) => {
        this.isLoading = false
        this.delHandleCancel()
        if (res.code == "0000") {
          this.$vux.toast.show({
            text: "删除成功",
            type: "success",
          });
          this.hideConfirm();
          this.getList();
        }else{
          this.$vux.toast.show({
            text: res.message,
            type: "warn",
          });
        }
      });
    },

    // 选择
    change(id,label,e){
      this.ID = id
      if(e[0] == "编辑"){
        this.title = "编辑"
        this.inputValue = label
        this.show = true
        return
      }
      if(e[0] == "删除"){
        this.delShow = true
        return
      }
      
    },
    //  添加按钮
    addBtn(){
      this.title = "新增"
      this.show = true
    },
    // 获取列表
    getList(num, size){
      let _params = {
        pageNum: num,
        pageSize: size
      };
      this.isLoading = true
      ManageApi.PlaceFindAll(_params).then((res) => {
        this.isLoading = false
        if (res.code == "0000") {
          this.ResList = res.data.records || [];
        }
      })
    },
  }
}
</script>

<style lang="less" scoped>
.submit-box {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 10px 0;
  background: #fff;
  z-index: 100;
  .submit-btn {
    width: 260px;
    border-radius: 20px;
    color: #fff;
    margin: 0 auto;
    border-color: rgb(205, 166, 105);
    background: rgb(205, 166, 105);
  }
}
.inp_text{
    width: 80%;
    border: 1px solid #dedede;
    border-radius: 5px;
    padding: 4px 5px;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    font-size: 16px;
}
</style>